<template>
    <div class="header">
        <div class="header_l">
            <span class="iconfont">&#xe624;</span>
        </div>
        <div class="header_input">
            <span class="iconfont">&#xe632;</span>  
           输入城市/景点/游玩
        </div>
        <router-link to="/city">
            <div class="header_r">{{cityname}}<span class="iconfont">&#xe6aa;</span></div>
        </router-link>
        
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name:'Homeheader',
        computed:{
            ...mapState(['cityname'])
        }
    }
</script>

<style scoped lang="stylus">
    @import '~style/varibles.styl';
    .header
        height 0.86rem
        background $bgColor
        color #ffffff
        text-align center
        line-height 0.86rem
        display flex
        .header_l
            float left
            width 0.64rem
        .header_input
            flex  1
            background #ffffff
            height 0.64rem
            margin 0.12rem 0.1rem
            border-radius 0.1rem
            color #cccccc
            font-size   0.28rem
            line-height 0.64rem     
        .header_r
            float right 
            min-width 1.04rem
            padding 0 0.1rem
            color   #fff
            font-size   0.3rem
            a
              color   #fff
              .iconfont
                  margin-left 0.03rem
                  font-size   12px
</style>